<template>
  <div id="cell" class="container_wrap">
    <div class="cell_title">
      <h4 class="title">每日特卖抢购</h4>
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
          <span class="colon txt">后结束</span>
        </template>
      </van-count-down>
    </div>
    <ul class="cell_list">
      <li class="list_item" v-for="(item,index) in celllist" :key="index">
        <div class="inimg">
          <img :src="item.inimg" alt="" />
          <span class="tag">{{item.tag}}</span>
        </div>
        <div class="desc">
          <p class="msg">{{item.msg}}</p>
          <p class="tips">{{item.tips}}</p>
          <p class="price">
            <span class="red-pri fl">¥{{item.red}}起</span>
            <span class="through fl">¥{{item.through}}</span>
            <span class="sell fr">已售 {{item.sell}}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Swiper from "swiper";
import "../../../node_modules/swiper/css/swiper.css";
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      celllist:[]
    };
  },
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
    this.$axios.get("../../../static/json/cell.json")
    .then(res=>{
      this.celllist=res.data.cell_list
    })
  },
};
</script>

<style scoped lang="less">
#cell {
  .cell_title {
    overflow: hidden;
    .title {
      float: left;
      margin: 0;
      padding-top: 0.03rem;
    }
    .van-count-down {
      float: right;
      padding-right: 0.12rem;
      .colon {
        display: inline-block;
        margin: 0 -3px;
        color: #fb5f49;
      }
      .txt {
        margin-left: 0.01rem;
        font-weight: 700;
        line-height: 0.4rem;
      }
      .block {
        display: inline-block;
        width: 0.4rem;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #fb5f49;
        border-radius: 0.1rem;
      }
    }
  }
  .cell_list {
    width: 100%;
    padding-top: 0.2rem;
    white-space: nowrap;
    overflow-x: scroll;
    .list_item {
      background: #fff;
      height: 5.2rem;
      width: 3.2rem;
      display: inline-block;
      margin-right: .3rem;
      .inimg {
        width: 100%;
        position: relative;
        img {
          width: 100%;
          border-radius: 0.1rem;
        }
        .tag {
          color: #fff;
          background-color: #fb6650;
          border-radius: 0.1rem;
          font-size: 0.24rem;
          position: absolute;
          bottom: 0.2rem;
          left: 0.08rem;
          padding: 0.01rem 0.08rem;
        }
      }
      .desc {
        font-size: 0.28rem;
        .msg {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p {
          margin: 0;
        }
        .tips {
          color: rgb(192, 190, 190);
          font-size: 0.26rem;
          margin-top: 0.16rem;
        }
        .price {
          margin-top: 0.1rem;
          color: rgb(192, 190, 190);
          font-size: 0.26rem;
          overflow: hidden;
          .fl {
            float: left;
          }
          .fr {
            float: right;
          }
          .red-pri {
            color: #fb725d;
          }
          .through {
            text-decoration: line-through;
            padding-top: 0.04rem;
            margin-left: 0.08rem;
          }
        }
      }
    }
  }
}
</style>